
//导航栏组件
Vue.component("uinavbar",{

   props:{
      title:{
          type:String,
          required:true
      }
   },
    template:`
    <div class="navbar">
        <span @click="$emit('clickleft')"><返回</span>
        <span>{{title}}</span>
        <span @click="$emit('clickright')">搜索🔍</span>
    </div>
    `
})


//表单组件
Vue.component("uitable",{

     data () {
       return {
           formData:{
             account:"",
             pwd:""
           }
        }
     },

    template:`<fieldset>
    <legend>表单组件</legend>
    用户名：<input type="text" v-model="formData.account"/>
    密码：<input type="password" v-model="formData.pwd"/>
    <button @click="$emit('submit',formData)">提交</button>
</fieldset>`
})


//按钮组件
Vue.component("uibutton",{

    props:{
        //显示不同按钮
     content:{
         type:String,
         required:true
     },
     //按钮显示不同颜色
     type:{
         type:String,
         default:"primary"
     }
    },

    template: `<button :class="['uibutton','uibutton--'+type,'uibutton--normal']">
    <div class="uibutton__content">
    <span class="uibutton__text">{{content}}</span>
    </div>
</button>` 
    
})


//loading 局部组件
Vue.component("uiloading1",{

   props:{
      status:{
          type:Boolean,
          default:false
      }
   },   

    template:`
    <div class="loading1" v-if="status">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
    `
})

//loading 全屏组件
Vue.component("uiloading2",{
    props: {
       status: {
            type: Boolean,
            default: false,
        }
    },
    template:`<div class="loading2" v-if="status" @click="$emit('close', false)">
    <span>loading...</span>
</div>`
})

//dialog对话框组件
Vue.component("uidialog",{

    props:{
     title:{
         type:String,
         default:"提示"
     },
     content:{
        type:String,
        default:"这是一段文字"
     },
     status:{
        type: Boolean,
        default: false,
     }

    },
    template:`<div class="dialog" v-if="status" @click="$emit('close', false)">
    <div class="box">
        <div class="header">{{title}}</div>
        <div class="main">
        {{content}}
        </div>
        <div class="footer">
            <button>确定</button>
            <button @click="$emit('close', false)">取消</button>
            
        </div>
    </div>
</div>`
})

//分页组件
Vue.component("uipage",{
    props:{
     total:{
         type:Number,
         default:0,
     },
     pagesize:{
        type:Number,
        default:2,
     }
    },
    data(){
      return{
          totalPage:0
      }
    },
    watch:{

        total: {
            handler(newdata,olddata) {
                this.totalPage = Math.ceil(this.total/this.pagesize)
            },
            immediate: true,
        }

    },
    template:`<div class="page">
    <span v-for="num in totalPage" @click="$emit('pageclick',num)">{{num}}</span>
</div>`
})